<template>
  <div>
    <van-nav-bar
      :z-index="999"
      :fixed="true"
      left-arrow
      @click-left="onClickLeft"
      :placeholder="true"
      title="车辆详情"
    ></van-nav-bar>
    <img class="vd-img" src="../../../assets/images/04.png" alt />
    <!-- 车辆详情 -->
    <div class="vd-name-price">
      <div class="vd-name">日产 逍客 2016款 2.0L CVT豪华版</div>
      <div class="vd-price">
        <p>
          <span>￥</span>7.58
          <span>万</span>
        </p>
        <div>免费咨询</div>
      </div>
      <div class="vd-validate">
        <div>58车检服务</div>
        <div></div>
        <div>专业技师检测 杜绝事故车</div>
        <img src="../../../assets/images/05.png" alt />
      </div>
    </div>
    <!-- 车辆档案 -->
    <div class="vd-vehicle-files">
      <div class="vd-vehicle">
        <p class="vd-header">车辆档案</p>
        <div class="vd-coordinate">
          <img src="../../../assets/images/06.png" alt />
          <div>石家庄</div>
        </div>
      </div>
      <div class="vd-particulars">
        <div class="vd-d-list">
          <p>上牌时间</p>
          <div>2016.01</div>
        </div>
        <div class="vd-d-list">
          <p>行驶里程</p>
          <div>4.48万公里</div>
        </div>
        <div class="vd-d-list">
          <p>年检到期</p>
          <div>2020.01</div>
        </div>
        <div class="vd-d-list">
          <p>强险到期</p>
          <div>2020.12</div>
        </div>
        <div class="vd-d-list">
          <p>排放标准</p>
          <div>国 V</div>
        </div>
        <div class="vd-d-list">
          <p>车辆性质</p>
          <div>非运营</div>
        </div>
        <div class="vd-d-list">
          <p>车辆类型</p>
          <div>越野车/SUV</div>
        </div>
        <div class="vd-d-list">
          <p>车身颜色</p>
          <div>棕色</div>
        </div>
      </div>
    </div>
    <!-- 卖家信息 -->
    <div class="vd-seller-information">
      <div class="vd-header">卖家信息</div>
      <div class="vd-owner">
        <img src="../../../assets/images/07.png" alt />
        <div class="vd-issue">
          <p>杨先生</p>
          <div>发布于石家庄</div>
        </div>
        <div class="vd-contact">联系车主</div>
      </div>
      <div class="vdc-vehicle">
        <div>【页面展示价格为分期购买用户专享，低于全款购车价格】</div>
        <div>车辆编码：121820543</div>
        <div>车辆信息</div>
        <div>车辆名称：日产 蓝星鸟 2019款 LANNIA 1.6L CVT酷炫版 国V</div>
        <div>车辆颜色：白色外观|浅色内饰</div>
        <div>上牌时间：2019|1-行驶里程：1.47万公里</div>
        <div>年检时间：2021|1-交强险到期：2021|1</div>
        <div>车辆性质：非营运七座(含七)以下车辆小型车</div>
        <div>车辆证件：车船税、登记证、购置税</div>
        <div>车辆概况：</div>
        <div>[可分期 过户快 专业检测]</div>
        <div>外观：漆面成新度好、整备质量好，保证美观度的同时，也提高车漆的耐久性</div>
        <div>内饰：内饰经过全方位清洁，清除使用痕迹和磨损修复。并确保电动调节设备、音响、导航、空调等电器设备正常工作；</div>
        <div>性能：保证车辆行驶的稳定性和驾驶的平顺性，制定、悬挂正常有效</div>
      </div>
      <div>查看更多信息</div>
    </div>
    <!-- 卖家售价 -->
    <div class="vd-seller-sells">
      <div class="vd-seller">
        <p>卖家售价</p>
        <div>5.19万</div>
      </div>
      <!-- 输入框 -->
      <div class="vd-input">
        <input type="text" placeholder="请输入您的报价" />
        <div class="vd-flex">万</div>
        <div class="vd-bargain">砍价</div>
      </div>
    </div>
    <!-- 车辆实拍 -->
    <div class="vd-live-shot">
      <div class="vd-header">车辆实拍</div>
      <div>
        <img src="../../../assets/images/08.png" alt />
        <img src="../../../assets/images/09.png" alt />
        <img src="../../../assets/images/10.png" alt />
        <img src="../../../assets/images/11.png" alt />
      </div>
      <div class="vd-examine">查看更多车辆照片</div>
    </div>
    <!-- 相关车源推荐 -->
    <div class="vd-recommend">
      <p class="vd-header">相似车源推荐</p>
      <div>
        <div v-for="(item, index) in cardList" :key="index" class="vd-card">
          <img :src="item.img" alt />
          <p>{{item.text}}</p>
          <div>{{item.time}}年/{{item.kilometre}}万公里</div>
          <p>{{item.price}}万</p>
        </div>
      </div>
    </div>
    <!-- 推荐新车 -->
    <div class="vdr-recommend">
      <div v-for="(item, index) in recommendCard" :key="index">
        <img :src="item.img" alt />
        <p>{{item.name}}</p>
        <div>{{item.price}}万</div>
      </div>
    </div>
    <!-- 新款可砍价 -->
    <div class="vd-new-style">
      <p class="vd-header">新款可砍价</p>
      <div class="vd-newStyle">
        <div class="vd-reminder">新车</div>
        <div class="vd-item-crad">
          <img src="../../../assets/images/11.png" alt />
          <div>
            <p>新车指导价</p>
            <div>15.94-18.54万</div>
          </div>
          <img src="../../../assets/images/05.png" alt />
        </div>
      </div>
    </div>
    <!-- 底部导航栏 -->
    <div class="vd-buttom">
      <div class="vd-collect">
        <img src="../../../assets/images/16.png" alt />
        <p>收藏</p>
      </div>
      <div class="vd-collect">
        <img src="../../../assets/images/17.png" alt />
        <p>抢优惠</p>
      </div>
      <div class="vd-phone">分期付款</div>
      <div class="vd-phone">电话咨询</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "vehicleDetails",
  data() {
    return {
      cardList: [
        {
          img: require("../../../assets/images/11.png"),
          text: "福特 福克斯两厢 2012款 两厢 1.6L 自动风尚型",
          time: "2013",
          kilometre: "6.64",
          price: "4.9"
        },
        {
          img: require("../../../assets/images/10.png"),
          text: "现代 名图 2014款 1.8L 自动智能型 GLS",
          time: "2015",
          kilometre: "7.71",
          price: "7.73"
        },
        {
          img: require("../../../assets/images/09.png"),
          text: "日产 轩逸 2012款 经典1.6XL 手动豪华版",
          time: "2013",
          kilometre: "6.3",
          price: "3.83"
        },
        {
          img: require("../../../assets/images/08.png"),
          text: "大众 捷达 2010款 1.6L 伙伴",
          time: "2013",
          kilometre: "7.64",
          price: "3.12"
        }
      ],
      // 推荐新车
      recommendCard: [
        {
          img: require("../../../assets/images/11.png"),
          name: "标致 3008",
          price: "13.97-14.97"
        },
        {
          img: require("../../../assets/images/12.png"),
          name: "标致 3008",
          price: "13.97-14.97"
        },
        {
          img: require("../../../assets/images/13.png"),
          name: "柯珞克",
          price: "13.97-17.74"
        },
        {
          img: require("../../../assets/images/14.png"),
          name: "创界",
          price: "13.99-17.99"
        }
      ]
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  },
    created(){
    let dsBridge = require("dsbridge");
         dsBridge.call("goBack","", function() {
           history.go(-1);
         });
   },
};
</script>

<style>
</style>